<template>
	<view class="page">
		<MyTabs :tabs="tabs" v-model:currentTab="currentTab" :tabMessages="tabMessages" />

		<view class="box_top">
			<view class="image-container">
				<image class="uimages" :src="imageUrl1" mode="" />
			</view>

			<view style="padding: 0 250rpx; box-sizing: border-box; margin: 40rpx 0;">
				<image style="height: 46rpx; width: 248rpx; margin: 0 auto;" :src="imageUrl2" mode="" />
			</view>
		</view>

		<view v-if="currentTab === 0">
			<MyprojectVue :projectData="allProjectData['未完成']" :imageUrl3="imageUrl3" />
		</view>

		<view v-if="currentTab === 1">
			<MyprojectVue :projectData="allProjectData['试运行']" :imageUrl3="imageUrl3" />
		</view>

		<view v-if="currentTab === 2">
			<MyprojectVue :projectData="allProjectData['已完成']" :imageUrl3="imageUrl3" />
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		onMounted
	} from 'vue';
	import MyTabs from '../../components/Mymaintenance/My_maintenance.vue';
	import MyprojectVue from '../../components/My_project.vue';

	export default defineComponent({
		components: {
			MyTabs,
			MyprojectVue
		},
		setup() {
			const tabs = [{
					name: '未完成'
				},
				{
					name: '试运行'
				},
				{
					name: '已完成'
				}
			];

			const currentTab = ref(0);

			const imageUrl1 = 'http://openapi.keyboardadmin.com:9001/KingdeeCommunity/banner@xm.png';
			const imageUrl2 = 'http://openapi.keyboardadmin.com:9001/KingdeeCommunity/title2@2x.png';
			const imageUrl3 = 'http://openapi.keyboardadmin.com:9001/KingdeeCommunity/ico@2x.png';

			const projectData = [{
					fid: 1,
					编码: 'P001',
					名称: '盛羽秀一期',
					客户: '客户X',
					期数: 1,
					合同日期: '2024-01-10',
					项目资金: 500000,
					开始日期: '2024-02-01',
					结束日期: '2024-05-01',
					交付状态: '已交付',
					交付日期: '2024-05-02',
					销售员: '张三',
					项目经理: '李四',
					实施: '王五',
					前端开发: '赵六',
					后端开发: '孙七',
					Ui设计: '钱八',
					参与者: '李四, 王五, 赵六',
					描述: '这是一个关于项目A的描述。'
				},
				{
					fid: 2,
					编码: 'P002',
					名称: '国大',
					客户: '客户Y',
					期数: 2,
					合同日期: '2024-03-15',
					项目资金: 300000,
					开始日期: '2024-04-01',
					结束日期: '2024-08-01',
					交付状态: '进行中',
					销售员: '李明',
					项目经理: '王芳',
					实施: '赵强',
					前端开发: '张伟',
					后端开发: '孙丽',
					Ui设计: '周宇',
					参与者: '王芳, 赵强, 张伟',
					描述: '这是关于项目B的详细描述。'
				},
				// Add more project data as needed...
			];

			const prot = [{
					fid: 1,
					编码: 'P001',
					名称: '国大',
					客户: '客户X',
					期数: 1,
					合同日期: '2024-01-10',
					项目资金: 500000,
					开始日期: '2024-02-01',
					结束日期: '2024-05-01',
					交付状态: '已交付',
					交付日期: '2024-05-02',
					销售员: '张三',
					项目经理: '李四',
					实施: '王五',
					前端开发: '赵六',
					后端开发: '孙七',
					Ui设计: '钱八',
					参与者: '李四, 王五, 赵六',
					描述: '这是一个关于项目A的描述。'
				},
				{
					fid: 2,
					编码: 'P002',
					名称: '利世',
					客户: '客户Y',
					期数: 2,
					合同日期: '2024-03-15',
					项目资金: 300000,
					开始日期: '2024-04-01',
					结束日期: '2024-08-01',
					交付状态: '进行中',
					销售员: '李明',
					项目经理: '王芳',
					实施: '赵强',
					前端开发: '张伟',
					后端开发: '孙丽',
					Ui设计: '周宇',
					参与者: '王芳, 赵强, 张伟',
					描述: '这是关于项目B的详细描述。'
				},
				// Add more project data as needed...
			];

			const inwue = [{
					fid: 1,
					编码: 'P001',
					名称: '帛泰三期',
					客户: '客户X',
					期数: 1,
					合同日期: '2024-01-10',
					项目资金: 500000,
					开始日期: '2024-02-01',
					结束日期: '2024-05-01',
					交付状态: '已交付',
					交付日期: '2024-05-02',
					销售员: '张三',
					项目经理: '李四',
					实施: '王五',
					前端开发: '赵六',
					后端开发: '孙七',
					Ui设计: '钱八',
					参与者: '李四, 王五, 赵六',
					描述: '这是一个关于项目A的描述。'
				},
				{
					fid: 2,
					编码: 'P002',
					名称: '雪花秀',
					客户: '客户Y',
					期数: 2,
					合同日期: '2024-03-15',
					项目资金: 300000,
					开始日期: '2024-04-01',
					结束日期: '2024-08-01',
					交付状态: '进行中',
					销售员: '李明',
					项目经理: '王芳',
					实施: '赵强',
					前端开发: '张伟',
					后端开发: '孙丽',
					Ui设计: '周宇',
					参与者: '王芳, 赵强, 张伟',
					描述: '这是关于项目B的详细描述。'
				},
				// Add more project data as needed...
			];

			const allProjectData = reactive({
				未完成: projectData,
				试运行: prot,
				已完成: inwue
			});

			onMounted(() => {
				console.log('页面已加载');
				// You can add any additional setup logic here
			});

			return {
				tabs,
				currentTab,
				imageUrl1,
				imageUrl2,
				imageUrl3,
				allProjectData
			};
		}
	});
</script>

<style lang="scss">
	.page {
		height: 100vh;
		padding-bottom: 50rpx;
		background-color: #F6F6F6;
	}

	.image-container {
		width: 100%;
		height: 320rpx;
		overflow: hidden;
	}

	.uimages {
		width: 100%;
		height: 320rpx;
	}

	// Other styles here
</style>